<template>
  <div class="select-line-chart">
    <div class="head-row">
      <DSelecter v-model="model" :options="dataTypes" />
    </div>
    <div class="chart-box">
      <LineChart :options="options" />
    </div>
  </div>
</template>

<script setup name="SelectLineChart">
import DSelecter from '@/components/DSelecter.vue'
import LineChart from '@/components/Charts/LineChart.vue'
import dayjs from 'dayjs'
import { randomLenNum } from '@/utils/index.js'
import { getDataTypes, getLeftPicDatas } from '@/api/base.js'

import { watch, watchEffect } from 'vue'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue'])

const model = useVModel(props, 'modelValue', emit)

const options = ref(null)
const dataTypes = ref([])

const init = () => {
  // 模拟接口获取数据
  // console.log('查询参数', model.value)
  let flat = model.value.reduce((prev, next) => {
    return prev.concat(',' + next) //循环将数组进行拼接
  })
  getLeftPicDatas({ time: 0.1, types: flat }).then(res => {
    if (res.code == '0000') {
      options.value = res.data
    }
    // console.log(res, "leftddddddddddddddd");
  })
}

watch(
  model,
  () => {
    init()
  },
  {
    immediate: true
  }
)

onMounted(() => {
  getDataTypes(null).then(res => {
    // console.log(res.data, '0900000000');
    dataTypes.value = res.data
  })
})
</script>

<style lang="scss" scoped>
.select-line-chart {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .head-row {
    margin-bottom: 20px;
    height: 32px;
  }

  .chart-box {
    width: 100%;
    height: calc(100% - 32px - 20px);
  }
}
</style>
